<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>流程定义</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <jsp:include page="/inc/head.jsp" flush="true"/>
    <jsp:include page="/inc/footer.jsp" flush="true"/>
    <script src="${basePath }/js/tip.js"></script>
    <style>
        .content .box {
            border-top: 0;
        }
        .content #rowTable .bootstrap-table .fixed-table-toolbar .icon-refresh {
            padding: 3px 0;
        }
        .content .fixed-table-toolbar .bs-bars, .content .fixed-table-toolbar .columns,.content .fixed-table-toolbar .search {
            margin-top: 0;
        }
        #doDefineForm .radio label {
            padding-left:0;
        }
        #doActDefine h4 {
            font-weight: bold;
        }
        #doActDefine  .bg-info {
            background-color: transparent;
        }
        #doActDefine  .col-sm-9 {
            padding-left: 0;
        }
        #doActDefine label {
            font-weight: normal;
        }
        #doActDefine input[type="text"],#doActDefine select {
            width: 230px!important;
        }
        #doActDefine #doDefineForm {
            padding-left: 50px;
        }
    </style>
</head>
<body class="hold-transition skin-blue sidebar-mini" style="overflow:hidden;">
<!-- Main content -->
<section class="content">
    <div id="toolbar" class="btn-group">
        <shiro:hasPermission name="upms:define:create">
        <button id="btn_add" type="button" class="btn btn-default" onclick="addDefine()">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加定义
        </button>
        </shiro:hasPermission>
        <shiro:hasPermission name="upms:define:update">
        <button id="btn_update" type="button" class="btn btn-default" onclick="updateDefine()">
            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改定义
        </button>
        </shiro:hasPermission>
        <shiro:hasPermission name="upms:define:delete">
        <button id="btn_delete" type="button" class="btn btn-default" onClick ="delDefine()">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除定义
        </button>
        </shiro:hasPermission>
    </div>

    <div id = "rowTable" class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-body table-responsive no-padding">
                    <table id="defineTable">
                    </table>
                </div>
            </div>
        </div>
    </div>

    <%--添加/修改工作流定义模态框--%>
    <div id="doActDefine" class="modal fade bs-example-modal-lg addUpdateInfo" role="dialog"
         aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog " role="document">
            <div class="modal-content" style="width: 600px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleDefineLabel">新增定义</h4>
                </div>
                <div class="modal-body" style="height: 300px;">
                    <form id="doDefineForm" method="post" class="form-horizontal">
                        <div class="form-group">
                            <label for="adCode" class="col-sm-3 control-label">流程关联</label>
                            <div class="col-sm-9">
                                 <span class="type1 type2 type3 ">
                                <select id="adCode" name="adCode" style="width: 230px;" class="form-control" >
                                    <option value="0">请选择流程关联</option>
                                    <c:forEach items="${lists }" var="dictionary">
                                        <option value="${dictionary.code}">${dictionary.description}</option>
                                    </c:forEach>
                                </select>
                            </span>

                            </div>

                        </div>
                        <div class="form-group">
                            <label for="adName" class="col-sm-3 control-label">名称</label>
                            <div class=" col-sm-9">

                            <input id="adName" type="text" class="form-control" name="adName" maxlength="20">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="adKey" class="col-sm-3 control-label">流程唯一性标识</label>
                            <span class="type1 type2 type3 col-sm-9">
                                <select id="adKey" name="adKey" style="width: 230px;" class="form-control" >
                                    <option value="0">请选择流程唯一性标识(key)</option>
                                    <c:forEach items="${keySet }" var="key">
                                        <option value="${key}">${key}</option>
                                    </c:forEach>
                                </select>
                            </span>
                        </div>
                        <div class="form-group">
                            <label for="adDescription" class="col-sm-3 control-label">流程描述</label>
                            <div class="col-sm-9">

                                <input id="adDescription" type="text" class="form-control" name="adDescription"
                                       maxlength="20">
                            </div>

                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label"></label>
                            <div class="col-sm-9">
                                <div class="radio">
                                    <div class="radio radio-inline radio-success">
                                        <input id="adStatus_1" type="radio" name="adStatus" value="1" checked>
                                        <label for="adStatus_1">正常 </label>
                                    </div>
                                    <div class="radio radio-inline">
                                        <input id="adStatus_0" type="radio" name="adStatus" value="0">
                                        <label for="adStatus_0">锁定 </label>
                                    </div>
                                </div>

                            </div>

                        </div>


                        <input type="hidden" id="adId" name="adId" value="">
                    </form>
                </div>
                <div class="modal-footer bg-info">
                    <button type="button" class="btn green" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="createDefine" onclick="doDefine();">确认</button>
                </div>
            </div>
        </div>
    </div>
</section>
</body>
<script type="text/javascript">
    var $table = $('#defineTable');

    var activitiName = {};
    $(function(){
        $.ajax({
            url:"${basePath}/manage/dictionary/getActivitiName",
            type:"get",
            async:false,
            dataType:'json',
            success:function(data){
                for(var index in data){
                    var code = data[index].code;
                    var description = data[index].description;
                    activitiName[code] = description;
                }
            }
        });

        showTable();
    })
    function showTable() {
        $table.bootstrapTable({
            url: "${basePath}/pcwindow/getActDefine",
//                height: getHeight(),
            striped: true,
//            search: true,
            showRefresh: true,
            showColumns: true,
            minimumCountColumns: 2,
            clickToSelect: true,
            detailView: false,
            detailFormatter: 'detailFormatter',
            pagination: true,
            paginationLoop: false,
            sidePagination: 'server',
            silentSort: false,
            smartDisplay: false,
            escape: true,
            searchOnEnterKey: true,
            idField: 'adId',
            maintainSelected: true,
            toolbar: '#toolbar',
            columns: [
                {field: 'ck', align: 'center', checkbox: true},
                {field: 'adId', visible:false },
                {field: 'adCode', title: '流程关联', sortable: true, align: 'center', formatter: 'adCodeFormatter'},
                {field: 'adName', title: '名称', sortable: true, align: 'center'},
                {field: 'adKey', title: '流程唯一性标识', sortable: true, align: 'center'},
                {field: 'adDescription', title: '流程描述', sortable: true, align: 'center'},
                {field: 'adStatus', title: '状态', sortable: true, align: 'center', formatter: 'statusFormatter'},
                {field: 'action', title: '操作', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}
            ],
            onLoadSuccess:function(data){
                //无数据隐藏分页
                if(data && data.total == 0){
                    $('.fixed-table-pagination').hide()
                }
            }
        });
        $table.bootstrapTable('resetView',{height:setHeight()});
    }
    //初始化状态内容
    function statusFormatter(value, row, index){
        if (value == 1) {
            return '<span class="label label-success">正常</span>';
        } else {
            return '<span class="label label-default">锁定</span>';
        }
    }
    //格式化操作动作
    function actionFormatter(value, row, index){
        return [
            '<shiro:hasPermission name="upms:define:update"><a class="update" href="javascript:;" onclick="updateDefine (\'' + row.adId +'\');" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a></shiro:hasPermission>　',
            '<shiro:hasPermission name="upms:define:delete"><a class="delete" href="javascript:;" onclick="delDefine(\'' + row.adId +'\');" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a></shiro:hasPermission>'
        ].join('');
    }

    //初始化code
    function adCodeFormatter(value, row, index) {
        return activitiName[value];
    }

    //新增定义
    function addDefine(){
        //初始化弹出框
        $("#adCode").val("0");
        $("#adKey").val("0");
        $("#adName").val("");
        $("#adDescription").val("");
        $("#adStatus_0").attr("checked",true);
        $("#exampleDefineLabel").text("新增定义");
        $("#createDefine").attr("onclick","doDefine(0);");
        // 加载模态框
        $('#doActDefine').modal({
            keyboard: true
        });
    }

    //修改定义
    function updateDefine(id){
        var ids = [];
        var rows = $table.bootstrapTable('getSelections');
        if(id==null||typeof(id)=="undefined"){
            if (rows.length != 1) {
                confirmEvent("请仅且选择一条记录!");
                return;
            }else{
                ids.push(rows[0].adId);
            }
        }else{
            ids.push(id);
        }
        //显示模态框并赋值
        $.ajax({
            url:'${basePath}/pcwindow/toUpdateDefine',
            type:"post",
            data:{"id":ids.join("-")},
            dataType:"json",
            success:function (result) {
                $("#adCode").val(result.adCode);
                $("#adName").val(result.adName);
                $("#adKey").val(result.adKey);
                $("#adDescription").val(result.adDescription);
                $("#adId").val(result.adId);
                $("#exampleDefineLabel").text("修改定义");
                if(result.adStatus=="0"){
                    $("#adStatus_0").attr("checked",true);
                }else{
                    $("#adStatus_1").attr("checked",true);
                }
            }
        })
        $('#doActDefine').modal({
            keyboard: true
        });
        $("#createDefine").attr("onclick","doDefine(1);");
    }

    //删除定义
    function delDefine(id){
        var ids = [];
        var flag = false;
        var rows = $table.bootstrapTable('getSelections');
        if(id==null||typeof(id)=="undefined"){
            if (rows.length == 0) {
                confirmEvent("请至少选择一条记录!");
            }else{
                for (var i in rows) {
                    ids.push(rows[i].adId);
                }
                flag = true;
            }
        }else{
            ids.push(id);
            flag = true;
        }
        if(flag){
            Ewin.confirm({ message: "确认要删除选择的数据吗？" }).on(function (e) {
                if(!e){
                    return;
                }
                $.ajax({
                    type: 'post',
                    url: '${basePath}/pcwindow/delDefine',
                    data:{ids:ids.join("-")},
                    success: function(result) {
                        confirmEvent("删除成功!");
                        $table.bootstrapTable('refresh');
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        confirmEvent('系统开小差了，请稍后再试!');
                    }
                });
            })
        }
    }

    //操作工作流定义
    function doDefine(type){
        $("#adId").val();
        var $this = $(this);
        $(this).attr("disabled",true);
        var adCode = $("#adCode").find(":selected").val();
        var adName = $("#adName").val();
        var adKey = $("#adKey").find(":selected").val();
        var isStatus = $(".radio").find(":checked").val();
        //访问地址
        var url;
        //提示内容区别
        var headContent;
        if(adCode=="0"){
            confirmEvent("请选择流程关联项");
            $(this).attr("disabled",false);
            return;
        }
        if(adName==null||adName==""){
            confirmEvent("名称不能为空");
            $(this).attr("disabled",false);
            return;
        }
        if(adKey=="0"){
            confirmEvent("请选择唯一标识项");
            $(this).attr("disabled",false);
            return;
        }
        if(type==0){
            url = "${basePath}/pcwindow/addDefine";
            headContent = "添加";
        }else{
            url = "${basePath}/pcwindow/updateDefine";
            headContent = "修改";
        }

        $.ajax({
            url: url,
            data:$("#doDefineForm").serialize(),
            type:"post",
            dataType:"json",
            success:function(data){
                if(data==0){
                    confirmEvent(headContent+"失败");
                    $this.attr("disabled",false);
                }else{
                    var content = "";
                    if(isStatus==0){
                        content = headContent+"成功";
                    }else{
                        content = headContent+"成功,并应用于流程";
                    }
                    confirmEvent(content);
                    $this.attr("disabled",false);
                    $('#doActDefine').modal("hide")
                    $table.bootstrapTable('refresh');
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                confirmEvent('系统开小差了，请稍后再试!');
                $this.attr("disabled",false);
            }
        })
    }
    /**
     * 表格高度自适应
     * @return
     * winTop 浏览器视口高度
     * header 顶部通栏
     * breadcrumb 面包屑
     * mainFooter 底部
     */
    function setHeight(){
        var winTop = $(window.top).height(),
            header = window.top.document.querySelector('.main-header').offsetHeight,
            breadcrumb =  window.top.document.querySelector('.breadcrumb').offsetHeight,
            mainFooter = window.top.document.querySelector('.main-footer').offsetHeight;
        return winTop-header-breadcrumb-mainFooter-10;
    }
</script>
</html>